<template>
  <div>
    <a-form-model
      layout="horizontal"
      :model="recruitDetail"
      v-bind="{
        labelCol: { span: 4 },
        wrapperCol: { span: 14 },
      }"
    >
      <a-form-model-item label="岗位名称">
        <a-input v-model.trim="recruitDetail.name" />
      </a-form-model-item>
      <a-form-model-item label="岗位要求">
        <a-textarea
          v-model.trim="recruitDetail.requirement"
          :auto-size="{ minRows: 2, maxRows: 4 }"
        />
      </a-form-model-item>
      <a-form-model-item label="岗位描述">
        <wangEditor
          v-model="recruitDetail.desc"
          :disabled="wangEditorDisable"
        ></wangEditor>
      </a-form-model-item>
      <a-form-model-item label="岗位待遇">
        <a-input v-model.trim="recruitDetail.salary" />
      </a-form-model-item>
      <a-form-model-item label="联系方式">
        <a-input v-model.trim="recruitDetail.phone" />
      </a-form-model-item>
      <a-form-model-item label="地址">
        <a-input v-model.trim="recruitDetail.address" />
      </a-form-model-item>
    </a-form-model>
    <div class="actions">
      <a-button type="primary" @click="showModal">
        提交
      </a-button>
      <a-button type="primary" @click="back"> 返回 </a-button>
    </div>
    <a-modal
      centered
      title="提交"
      v-model="visible"
      @ok="submit"
      @cancel="cancel"
    >
      <p>确认提交？</p>
    </a-modal>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import wangEditor from '@/pages/components/wangEditor/index.vue';
import {
  getRecruitByIdApi,
  editRecruitApi,
  addRecruitApi,
} from '@/services/webApi/recruit';
// import { getRecruitByIdAdminApi } from '@/services/superAdmin';

export default {
  components: { wangEditor },
  data() {
    return {
      recruitId: 0,
      projectId: 0,
      recruitDetail: {},
      uploadUrl: '',
      headers: {},
      visible: false,
      wangEditorDisable: false,
      reg: /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-7|9])|(?:5[0-3|5-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1|8|9]))\d{8}$/,
    };
  },
  computed: {
    ...mapGetters('account', ['user']),
  },
  mounted() {
    this.recruitId = this.$route.params.id;
    if (this.recruitId == 0) {
      return;
    }
    if (this.user.type === '2') {
      this.admin();
    } else {
      this.superAdmin();
      this.wangEditorDisable = true;
    }
  },
  methods: {
    back() {
      window.history.go(-1);
    },
    async superAdmin() {
      // this.recruitId = this.$route.params.id;
      // let res = await getRecruitByIdAdminApi({
      //   id: this.recruitId,
      // });
      // this.recruitDetail = res.data;
    },
    async admin() {
      let res = await getRecruitByIdApi({
        id: this.recruitId,
      });
      this.recruitDetail = res.data;
    },
    showModal() {
      this.visible = true;
    },
    submit() {
      if (
        !this.recruitDetail.name ||
        !this.recruitDetail.requirement ||
        !this.recruitDetail.desc ||
        !this.recruitDetail.phone ||
        !this.recruitDetail.address
      ) {
        this.$message.error('不能为空');
        this.visible = false;
        return;
      }
      if (!this.reg.test(this.recruitDetail.phone)) {
        this.$message.error('填写正确的手机号');
        this.visible = false;
        return;
      }
      if (this.recruitId != 0) {
        editRecruitApi(this.recruitDetail)
          .then((res) => {
            this.$message.success(res.msg);
            setTimeout(() => {
              window.history.go(-1);
            }, 1000);
          })
          .catch((err) => {
            this.$message.error(err.msg);
          });
      } else {
        addRecruitApi(this.recruitDetail)
          .then((res) => {
            this.$message.success(res.msg);
            setTimeout(() => {
              window.history.go(-1);
            }, 500);
          })
          .catch((err) => {
            this.$message.error(err.msg);
          });
      }
    },
    cancel() {
      this.visible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.upload {
  width: 5rem;
  height: 5rem;
  border: solid;
}
img {
  width: 10rem;
  height: 10rem;
}
.actions {
  text-align: center;
  padding-right: 5rem;
  .ant-btn {
    margin-right: 10px;
  }
}
::v-deep .ant-form-item-control {
  z-index: 0;
}
</style>
